<template>
  <div class="main-container">
    <div style="background-color: #fff; height: 100%">
      <a-tabs
        :lazy-load="true"
        justify
        type="card"
        @change="tabsChange"
        :default-active-key="active"
      >
        <a-tab-pane key="1" title="五金仓出库">
          <div style="height: 100%">
            <OrderDeliveryList2></OrderDeliveryList2>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="制具仓出库">
          <div style="height: 100%">
            <OrderDeliveryList4></OrderDeliveryList4>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" title="原纱仓出库">
          <div style="height: 100%">
            <OrderDeliveryList3></OrderDeliveryList3>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" title="坯布仓出库">
          <div style="height: 100%">
            <ClothWarehouseOutOfStorage></ClothWarehouseOutOfStorage>
          </div>
        </a-tab-pane>
        <a-tab-pane key="6" title="次布仓出库">
          <div style="height: 100%">
            <SecondaryDistributionWarehouseOutOfStorage></SecondaryDistributionWarehouseOutOfStorage>
          </div>
        </a-tab-pane>
        <a-tab-pane title="成品仓出库" key="7">
          <div style="height: 100%">
            <FinishedProductOutstock />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts">
  import emitter from '@/hooks/useEventBus'
  import OrderDeliveryList2 from './components/OrderDeliveryList2.vue'
  import OrderDeliveryList3 from './components/OrderDeliveryList3.vue'
  import OrderDeliveryList4 from './components/OrderDeliveryList4.vue'
  import OrderDeliveryList5 from './components/OrderDeliveryList5.vue'
  import ClothWarehouseOutOfStorage from './components/ClothWarehouseOutOfStorage.vue'
  import SecondaryDistributionWarehouseOutOfStorage from './components/SecondaryDistributionWarehouseOutOfStorage.vue'
  import FinishedProductOutstock from '@/views/FinishedWarehouseManagement/components/FinishedProductOutstock/index.vue'

  import { useRoute } from 'vue-router'
  export default {
    name: 'Order',
    setup() {
      const tabsChange = (e: string | number) => {
        emitter.emit('window-change')
      }
      const route = useRoute()

      const active = ref('1')
      if (route.query.key) {
        active.value = route.query.key + ''
      }
      return {
        active,
        tabsChange,
      }
    },
    components: {
      OrderDeliveryList2,
      OrderDeliveryList3,
      OrderDeliveryList4,
      OrderDeliveryList5,
      ClothWarehouseOutOfStorage,
      SecondaryDistributionWarehouseOutOfStorage,
      FinishedProductOutstock,
    },
  }
</script>

<style scoped>
  .main-container {
    height: 100%;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  :deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
</style>
